<template>

  <el-row>
    <Spin v-show="isSpinShow" fix size="large">
    </Spin>
    <el-tabs tab-position="left" style="padding-top: 20px">
      <el-tab-pane label="">说明:全局预览插件，可以快速显示当前流程模型所有节点的处理人。</el-tab-pane>
    </el-tabs>
    <Card style="margin-left: 20px;margin-bottom: 10px;margin-top: 10px">
      <p slot="title">全局预览插件</p>

      <div style="margin-top: 20px;margin-left: 35px">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            icon="el-icon-more"
            :type="activity.type"
            color="#0bbd87"
            size="large"
            :timestamp="systemTime" placement="top">
            {{activity.content}}
            <el-card>
              <el-tabs v-model="activity.activeName">
                <el-tab-pane :label="getPreUserLable(activity)" name="first">
                  <el-table
                    :data="getTableData(activity)"
                    stripe
                    style="width: 100%">
                    <el-table-column
                      prop="pluginType"
                      label="规则名称"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="logicCal"
                      label="运算"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="ruleVal"
                      label="值"
                    >
                    </el-table-column>
                  </el-table>

                </el-tab-pane>
                <el-tab-pane label="表单" name="second">
                  <div  v-if=" activity.globalForm.type != 'externalUrl'" class="container"  style=" overflow: auto;max-height: 550px" >

                    <fm-generate-form
                      ref="generateForm"
                      :data="getForm(activity)"
                      :remote="remoteFuncs"
                      :value="editData"
                      :remote-option="dynamicData"
                    />
                  </div>
                  <div v-if="activity.globalForm.type == 'externalUrl'">
                    <iframe style="width: 100%; height: 673px; overflow: hidden; transition: height 0.3s ease 0s;"
                            width="100%"
                            height="100%"
                            frameborder="0"
                            align="center"
                            allowfullscreen="true"
                            allow="autoplay"
                            ref="iframe"
                            :src="getIframeSrc(activity)"
                    />
                    <div slot="footer"/>
                  </div>

                </el-tab-pane>
              </el-tabs>

            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </Card>

  </el-row>


</template>

<script>
  import {getAllActivityUser, saveModelTaskInfo} from "@/api/busModel";

  export default {
    name: 'Task',
    components: {},
    data() {

      return {
        jsonData: {},
        editData: {},
        remoteFuncs: {},
        activeName: 'second',
        isSpinShow: true,
        id: null,
        systemTime: null,
        activities: [],
        checkAll: false,
        isIndeterminate: true,
        rules: {
          chooseNode: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
          ]
        },

        show: false,
        addModel: false,
        alias: 'agree',
        activeName: 'first',
        tableData: [],
        nodes: [],
        msgData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal: false,
        show: false,
        index: 0,
        existData: []
      }
    },
    mount() {

    },
    created() {
      // this.getData()
      var query = this.$route.query;
      this.id = query.id;
      this.getTimestamp()
      if (query.id) {
        //初始化数据
        this.getAllActivity(query.id)

      }
    },
    methods: {
      getTimestamp: function (activity) {
        let nowDate = new Date()
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate()
        }
        this.systemTime = date.year + '-' + date.month + '-' + date.date

      },
      getPreUserCount: function (activity) {
        return activity.extA1UserRuleList.length
      },
      getActiveName: function (activity) {

      },
      getPreUserLable: function (activity) {
        return activity.name
      },
      getIframeSrc: function (activity) {
        if (activity.globalForm.type == 'externalUrl') {
          return activity.globalForm.addUrl
        }else{
          this.jsonData=JSON.parse(activity.pageFormsData)
        }
        //return activity.name + "『" + activity.id + "』"
      },
      getForm: function (activity) {
        if (activity.globalForm.type == 'externalUrl') {
          return activity.globalForm.addUrl
        }else{
          this.jsonData=JSON.parse(activity.pageFormsData)
          return   JSON.parse(activity.pageFormsData);
        }
      },
      getTableData: function (activity) {
        var tableData = []
        if (activity.extA1UserRuleList) {
          var extA1UserRuleList = activity.extA1UserRuleList;
          for (var i = 0; i < extA1UserRuleList.length; i++) {
            var extA1UserRuleListElement = extA1UserRuleList[i];
            var data = {};
            var pluginType = extA1UserRuleListElement.pluginType;
            var pluginVal = extA1UserRuleListElement.pluginVal;
            var ruleDisplayName = extA1UserRuleListElement.ruleDisplayName;
            var logicCal = extA1UserRuleListElement.logicCal;
            if (pluginType == 'users') {
              data['pluginType'] = '用户'
              data['ruleVal'] = pluginVal;
            }
            if (pluginType == 'position') {
              data['pluginType'] = '岗位'
              data['ruleVal'] = pluginVal;
            }
            if (pluginType == 'org') {
              data['pluginType'] = '部门'
              data['ruleVal'] = pluginVal;
            }
            if (pluginType == 'job') {
              data['pluginType'] = '职务'
              data['ruleVal'] = pluginVal;
            }
            if (pluginType == 'role') {
              data['pluginType'] = '用户'
              data['ruleVal'] = pluginVal;
            }
            if (pluginType == 'script') {
              data['pluginType'] = '脚本'
              data['ruleVal'] = pluginVal;
            }
            data['logicCal'] = logicCal;
            tableData.push(data)
          }
        } else {
        }
        return tableData;
      },


      handleCheckAllChange(val) {
        this.addForm.nodes = val ? this.nodes : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.nodes.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.nodes.length;
      },
      confirmDialogEvent: function (data) {
        this.addForm.users = data
        this.show = false
      },
      delCommonUsers: function (index) {
        this.addForm.users.splice(index, 1)
      },
      selectAddSignUsers: function (index) {
        this.index = index
        try {
          var node = this.tableData[this.index]
          if (node.activeName == 'created') {
            this.existData = node.userCreatedNotify
          } else {
            this.existData = node.userCompletedNotify
          }
        } catch (e) {
          this.existData = []
        }
        this.show = true
      },
      onSubmit: function () {
      },
      getAllActivity: function (id) {
        getAllActivityUser(id).then((response) => {
          if (response.success) {
            this.activities = response.result


          }
        })
        this.isSpinShow = false

      },
      go: function () {
        this.$router.go(-1)
      },
      close: function () {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      },
      save: function () {
        if (this.addForm.nodes.length > 0) {
          saveModelTaskInfo(this.addForm.id, this.addForm).then((response2) => {
            if (response2.code == 0) {
              this.$message({"duration": '800', message: '保存成功', type: 'success', customClass: 'zZindex'});
              this.close();
            }
          })
        } else {
          this.$message({"duration": 800, message: '请选择节点', type: 'warning', customClass: 'zZindex'});

          return;
        }


      },

    }

  }

</script>
<style lang="scss" scoped>
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }

  .task-card {
    margin-top: 10px;
  }

  .input_w {
    width: 40% !important;
  }

  .task-card {
    margin-top: 10px;
  }

  .item {
    display: block;
    margin-top: 20px;
    box-shadow: 0 0 20px 0 rgba(204, 207, 227, .45);
    margin-bottom: 10px;

  }

  .left {
    font-size: 16px;
    color: #575757;
  }

  img {
    width: 60px;
    height: 60px;
  }

</style>
